import React, { Component } from 'react'
import { List } from 'antd'
import { requestFeedback } from '../../api/message'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'

class UserBack extends Component {
    state = {
        initLoading: true,
        listHeight: window.innerHeight - 280,
        data: []
    }

    componentDidMount () {
        this.init()
    }

    init () {
        requestFeedback().then(res => {
            this.setState({
                data: res.data,
                initLoading: false
            })
        })
    }

    render () {
        const element=<List
            size="large"
            style={{ height: this.state.listHeight, overflow: 'auto' }}
            loading={this.state.initLoading}
            header={<div>用户反馈</div>}
            pagination={{
                onChange: page => {
                    console.log(page)
                },
                pageSize: 10,
            }}
            dataSource={this.state.data}
            renderItem={item => <List.Item>{item.msg}</List.Item>}
        />

        return ( <QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(UserBack)
